//烧结输入
<template>
    <!--<h1>烧结输入</h1>-->
    <div class="container">
        <div class="header">
            <i class="fa  fa-pencil" aria-hidden="true"></i>
            <span>辅助报表</span>
        </div>
        <div class="content-top">
            <div>
                <mt-cell title="数据输入" is-link @click.native="show_one_f" >
                </mt-cell>
                <div class="table-one-container" v-show="show_one">
                    <table class="table table-border">
                        <thead>
                        <tr>
                            <th colspan="4">
                                烧结矿存量表
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>落地矿进出量</td>
                            <td>(t)</td>
                            <td>落地矿供应量</td>
                            <td>(t)</td>
                        </tr>
                        <tr>
                            <td>4炉场地</td>
                            <td></td>
                            <td>4炉供炼铁</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>混2场地</td>
                            <td></td>
                            <td>混2供炼铁</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>球4场地</td>
                            <td></td>
                            <td>球4供炼铁</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>炉东场地</td>
                            <td></td>
                            <td>炉东供炼铁</td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div>
                <mt-cell title="文字输入" is-link  @click.native="show_two_f" >
                </mt-cell>
                <div class="table-two-container" v-show="show_two">
                    <table class="table table-border table-width">
                        <thead>
                        <tr>
                            <th colspan="5">交接班记录表</th>

                        </tr>
                        <tr>
                            <th colspan="3">
                                设备情况信息
                            </th>
                            <th colspan="3">
                                生产情况
                            </th>
                        </tr>
                        <tr>
                            <th>序号</th>
                            <th>事件描述</th>
                            <th>处理情况</th>
                            <th>时间描述</th>
                            <th>处理情况</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>11</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>12</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>13</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>


        </div>
        <div class="content-bottom">
            <div class="content-bottom-header">
                <i class="fa  fa-user-o" aria-hidden="true"></i>
                <span>我的工作</span>

            </div>
            <mt-cell title="工作记录" is-link  @click.native="show_three_f" >
            </mt-cell>
            <div class="table-three-container" v-show="show_three">
                <table class="table-border table">
                    <thead>
                    <tr>
                        <th>单位</th>
                        <th>底料位次数</th>
                        <th>高料位次数</th>
                    </tr>

                    </thead>
                    <tbody>

                    <tr>
                        <th>6炉</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr>
                        <th>7炉</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr>
                        <th>8炉</th>
                        <th></th>
                        <th></th>
                    </tr>
                    </tbody>
                </table>
                <table class="table-border table">
                    <thead>
                    <tr>
                        <th>单位</th>
                        <th>满仓数</th>
                        <th>满仓数</th>
                    </tr>

                    </thead>
                    <tbody>

                    <tr>
                        <th>5烧成</th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr>
                        <th>6烧成</th>
                        <th></th>
                        <th></th>
                    </tr>
                    </tbody>
                </table>
            </div>


        </div>
        <div class="replace">

        </div>

    </div>
</template>

<script>
    //   import echarts from "echarts";

    export default {
        name: "materialInput",
        data() {
            return {
                show_one:false,
                show_two:false,
                show_three:false
            };
        },
        mounted() {

        },
        methods:{
            show_one_f(){
                this.show_one = !this.show_one

            },
            show_two_f(){
                this.show_two = !this.show_two

            },
            show_three_f(){
                this.show_three = !this.show_three;

            }

        }
    };
</script>

<style lang="scss" scoped>
    .table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {
        border-top: 1px solid #ddd;
    }



    .table-two-container {
        overflow: scroll;
        /*display: none;*/
    }

    .table-width {
        width: 120%;
    }

    .replace {
        height: 28px;
    }

    .header,.content-bottom-header {
        margin: 10px 0;
        color: #26a2ff;
        padding: 0 10px;
    }

    .content-bottom-header {
        margin: 10px 0;
        padding: 0 10px;
    }


</style>
